<template>
	<view class="article-detail" :style="'background: url('+islandInfo.fullBackground+')'">

		<view class="info">
			<view class="back-arrow" :style="{'padding-top': paddingTop}">
				<uni-icons @click="toBackPage" type="left" size="30" color="#ffffff">
				</uni-icons>
				<view style="display: flex;flex-direction: row;">
					<uni-icons style="margin-right: 40rpx;" @click="toHome" type="home" size="30" color="#ffffff">
					</uni-icons>
					<uni-icons @click="toAddArticle" type="plus" size="30" color="#ffffff">
					</uni-icons>
				</view>
			</view>

			<view class="name">
				{{islandInfo.name}}
			</view>
			<view class="description">
				{{islandInfo.description}}
			</view>
			<view class="description">
				共 {{islandInfo.postCount}} 条
			</view>
			<view class="posts">
				<view class="content" v-if="posts[currentPostIndex]">
					<view v-for="post in renderContent" :key="post.id">
						<template v-if="post.type === 'text'">
							<view v-html="post.value"></view>
						</template>
						<template v-if="post.type === 'video'">
							<video
								@click.stop 
								:id="'video' + post.id"
								:src="post.src"
								@play="videoPlay(post.id)"
								@ended="videoEnd"
							></video>
						</template>
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="footer-item" v-if="posts[currentPostIndex] && posts[currentPostIndex].isMine">
				<view class="footer-button" @click="editArticle(posts[currentPostIndex].id)">
					<uni-icons type="compose" size="25" color="#ffffff"></uni-icons>
				</view>
			</view>

			<view class="footer-item" v-else>
				<view class="footer-button" @click="message()">
					<uni-icons type="chatboxes" size="25" color="#ffffff"></uni-icons>
				</view>
			</view>
			
			<view class="footer-item">
				<view class="footer-button" @click="toShareIsland()">
					<uni-icons type="redo" size="25" color="#FFFFFF"></uni-icons>
				</view>
			</view>

			<view class="footer-item" v-if="posts[currentPostIndex] && posts[currentPostIndex].isLike">
				<view class="footer-button" style="background-color: #e1c9d1;"
					@click="likeOrCancelPost(posts[currentPostIndex].id,currentPostIndex)">
					<uni-icons type="heart" size="25" color="#FFFFFF"></uni-icons>
				</view>
			</view>

			<view class="footer-item" v-else>
				<view class="footer-button" @click="likeOrCancelPost(posts[currentPostIndex].id,currentPostIndex)">
					<uni-icons type="heart" size="25" color="#FFFFFF"></uni-icons>
				</view>
			</view>

			<view class="footer-item">
				<view class="footer-button" style="padding: 0 100rpx;" @click="nextPost()">
					下一篇
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { parseArticleString } from '@/utils/parse'
	export default {
		data() {
			return {
				islandInfo: {
					id: "",
					name: "写给郑大的散文诗",
					description: "十二月，冬日暖阳下，时光静美，情怀悠然",
					background: "https://ts1.cn.mm.bing.net/th/id/R-C.01879d30c67fcc7d56b3c6a444a6cb20?rik=H2G9lvgZ7fj8yw&riu=http%3a%2f%2fsnowcoal.com%2fIMAGES_9532%2f201411%2f1416468166215.jpg&ehk=ptavJ5%2bvSyTplBvOgIHKOD0pWaTCqMoE%2fHmLxtgHN2k%3d&risl=&pid=ImgRaw&r=0",
					postCount: 286,
				},


				postPage: {
					pageSize: 20,
					pageNow: 1,
					visibility: 2,
					islandId: "",
					total: 0,
				},

				currentPostIndex: 0,

				posts: [],
				onPlayId: '', // 正在播放视频的id(post.id),进行互斥
				onPlayVideoContext: null, // 正在播放视频实例
				paddingTop:null
			}
		},
		onLoad(options) {
			this.islandInfo.id = options.islandId
			this.postPage.islandId = options.islandId
			this.getIslandInfo()
			this.pagePost()
			
			
			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';
			// #endif
		},
		methods: {
			getIslandInfo() {
				this.$api.getIslandInfo({
					id: this.islandInfo.id
				}).then(res => {
					this.islandInfo = res.data
				})
			},
			pagePost() {
				this.postPage.pageNow = 1
				this.$api.pagePost(this.postPage).then(res => {
					this.postPage.total = res.data.total
					this.posts = res.data.rows
				})
			},
			nextPost() {
				if (!this.posts[this.currentPostIndex+2]) {
					this.postPage.pageNow++
					this.$api.pagePost(this.postPage).then(res => {
						this.postPage.total = res.data.total
						this.posts = [...this.posts, ...res.data.rows]
					})
				}
				
				this.currentPostIndex++
				if (!this.posts[this.currentPostIndex]) {
					uni.showModal({
						title: "提示",
						content: "已没有更多推荐，期待由你来丰富"
					})
					this.currentPostIndex--
				}
			},
			likeOrCancelPost(id, postIndex) {
				this.$api.likeOrCancelPost({
					id
				}).then(res => {
					if (this.posts[postIndex].isLike) {
						this.posts[postIndex].likeCount--
						this.posts[postIndex].isLike = false
					} else {
						this.posts[postIndex].likeCount++
						this.posts[postIndex].isLike = true
					}
				})
			},
			editArticle(postId) {
				uni.navigateTo({
					url: "/pages_being/island/article-create?postId=" + postId
				})
			},
			toBackPage() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			message() {

			},
			toAddArticle() {
				uni.navigateTo({
					url: "/pages_being/island/article-create?islandId=" + this.islandInfo.id
				})
			},
			videoPlay(id) {
				if (this.onPlayId === id) {
					return
				}
				// 初始播放
				if (this.onPlayId === '') {
					this.onPlayId = id
					this.onPlayVideoContext = uni.createVideoContext('video' + id)//创建视频实例指向video
					return
				}
				// 互斥播放
				this.onPlayVideoContext.pause()
				this.onPlayVideoContext = uni.createVideoContext('video' + id)
				this.onPlayId = id
			},
			videoEnd() {
				this.onPlayId = ''
				this.onPlayVideoContext = null
			},
		},
		computed: {
			renderContent() {
				return parseArticleString(this.posts[this.currentPostIndex].content)
			}
		}
	}
</script>

<style scoped lang="scss">

	.article-detail {

		background-repeat: no-repeat;
		background-size: cover;
		height: 100vh;
		padding: 0 40rpx;

		.info {
			position: relative;
			z-index: 2;

			display: flex;
			flex-direction: column;
			
			

			.back-arrow {
				width: 100%;
				//#ifdef MP-WEIXIN
				width: 550rpx;
				//#endif
				
				padding-top: 100rpx;
				
				// #ifdef H5
				padding-top: 40rpx;
				// #endif
				
				height: 40rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}


			.name {
				color: #ffffff;
				font-size: 40rpx;
				margin-top: 60rpx;
			}

			.description {
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #e3e3e3;
			}

			.posts {
				width: 670rpx;
				height: 1000rpx;
				overflow-y: scroll;


				background-color: rgba(255, 255, 255, 0.8);
				// box-shadow: 0px 0px 8px 5px #e8e8e8;
				margin: 60rpx auto 0;
				border-radius: 10rpx;

				.content {
					width: 610rpx;

					margin: 40rpx 30rpx;

					line-height: 50rpx;

					// /deep/p {
					// 	margin: 20rpx 0;
					// }
					
					/deep/img {
						width: 100%;
					}

					/deep/video {
						width: 100%;
						max-height: 560rpx;
					}

				}


			}

		}

		.page-btns {
			display: flex;
			position: fixed;
			right: 100rpx;
			top: 200rpx;
			z-index: 10;
		}


		.footer {
			position: fixed;
			height: 130rpx;
			width: 100%;
			bottom: 0;
			z-index: 3;

			display: flex;
			flex-direction: row;
			align-items: flex-start;

			.footer-item {
				margin-right: 40rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;

				.text {
					font-size: 46rpx;
					font-weight: bold;

				}

				.footer-button {
					padding: 0 20rpx;
					height: 80rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background-color: rgba(208, 208, 208, 0.5);
					border-radius: 50rpx;
					color: white;
				}
			}
		}
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
